<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jsTree &raquo; Demos</title>

	<script type="text/javascript" src="../lib/jquery.js"></script>
	<script type="text/javascript" src="../lib/jquery.cookie.js"></script>
	<script type="text/javascript" src="../lib/jquery.hotkeys.js"></script>
	<script type="text/javascript" src="../lib/jquery.metadata.js"></script>
	<script type="text/javascript" src="../lib/sarissa.js"></script>
	<script type="text/javascript" src="../jquery.tree.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.checkbox.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.contextmenu.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.cookie.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.hotkeys.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.metadata.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.themeroller.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.xml_flat.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.xml_nested.js"></script>

	<link type="text/css" rel="stylesheet" href="syntax/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="syntax/shThemeDefault.css"/>
	<style type="text/css">
	html, body { margin:0; padding:0; }
	body, td, th, pre, code, select, option, input, textarea { font-family:"Trebuchet MS", Sans-serif; font-size:10pt; }
	#container { width:800px; margin:10px auto; overflow:hidden; }
	.demo { height:200px; width:300px; float:left; margin:0; border:1px solid gray; font-family:Verdana; font-size:10px; background:white; }
	.code { width:490px; float:right; margin:0 0 10px 0; border:1px solid gray; }
	pre { display:block; }
	.syntaxhighlighter { margin:0 0 0 0 !important; padding:0 !important; }
	</style>
	<script type="text/javascript" src="syntax/shCore.js"></script>
	<script type="text/javascript" src="syntax/shBrushJScript.js"></script>
	<script type="text/javascript" src="syntax/shBrushXml.js"></script>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'syntax/clipboard.swf';
		$(function () {
			var h = 0;
			$("#container .source").each(function () {
				var code = $(this).html().replace(/</g,'&lt;').replace(/>/g,'&gt;');
				var div = $('<div class="code"><pre class="brush:' + ( $(this).is("script") ? 'js' : 'xml' ) + ';">' + code + '</pre></div>');
				$(this).after(div);
			});
			SyntaxHighlighter.all();
		});
	</script>
</head>
<body>
<div id="container">
	<h1 class="title">Moving nodes demo</h1>
	<p>As you may have noticed, you can drag nodes around. You can influence the ability to drop a node somewhere using the <a href="../documentation.html#type.max_children">type max_children setting</a>, <a href="../documentation.html#type.max_depth">type max_depth setting</a> and <a href="../documentation.html#type.valid_children">type valid_children setting</a>. If you want to disable dragging a node type use the <a href="../documentation.html#type.draggable">type draggable setting</a> (you can event use it on the default node type). When moving the <a href="../documentation.html#callback.beforemove">beforemove</a>, <a href="../documentation.html#callback.onmove">onmove</a>, <a href="../documentation.html#callback.oncopy">oncopy</a>, <a href="../documentation.html#callback.check_move">check_move</a> and <a href="../documentation.html#callback.ondrop">ondrop</a> callbacks are triggered. Also if you assigned a function to them the global <a href="../documentation.html#tree.drag_start">tree.drag_start</a>, <a href="../documentation.html#tree.drag">tree.drag</a>, <a href="../documentation.html#tree.drag_end">tree.drag_end</a> are fired. Ondrop is only fired when dropping foreign items on the tree - for more on that - check the <a href="../documentation.html#tree.drop_mode">tree.drop_mode</a> function.</p>
	<p>If you want to copy when dragging without holding control or disable copying - read about the <a href="../documentation.html#rules.drag_copy">drag_copy</a> setting.</p>
	<p>For dragging items from one tree to another - check the <a href="../documentation.html#rules.multitree">multitree</a> setting.</p>
	<p>To move nodes programatically use the <a href="../documentation.html#copy">copy</a>, <a href="../documentation.html#cut">cut</a> &amp; <a href="../documentation.html#paste">paste</a> functions.</p>
	<script type="text/javascript" class="source">
	$(function () { 
		$.tree.drag_start = function () {
			$("#log").append("<br />Drag start ");
		};
		$.tree.drag = function () {
			$("#log").append(" .");
		};
		$.tree.drag_end = function () {
			$("#log").append(" Drag end<br />");
		};
		$("#demo_1").tree({
			rules : {
				// I have not defined any of these so disabling the checks will save CPU cycles
				use_max_children : false,
				use_max_depth : false
			},
			callback : {
				onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
					alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
				}
			}
		});
	});
	</script>

	<div class="demo" id="demo_1">
		<ul>
			<li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a>
				<ul>
					<li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li>
					<li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li>
					<li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>
				</ul>
			</li>
			<li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li>
		</ul>
	</div>
	<p class="source" style="margin-top:10px;">
		<input type="button" onclick='$.tree.focused().cut();' value="Cut" />
		<input type="button" onclick='$.tree.focused().copy();' value="Copy" />
		<input type="button" onclick='$.tree.focused().paste();' value="Paste" />
	</p>
	<div style="clear:both; min-height:300px;" id="log">Log:<br /></div>

</div></body></html>